<template>
    <div class="index-lists">
        <el-card class="!border-none" shadow="never">
            <el-page-header content="新建专利" @back="$router.back()" />
        </el-card>
        <el-card class="mt-4 !border-none" shadow="never">
            <el-collapse v-model="activeNames">
                <el-collapse-item title="基本信息" name="1">
                    <el-form
                        ref="formRef"
                        class="mb-[-16px]"
                        :model="queryParams"
                        :rules="formRules"
                        :inline="true"
                    >
                        <el-form-item label="提案号" prop="proposition">
                            <el-input
                                class="w-[200px]"
                                v-model="queryParams.id"
                                disabled
                                placeholder="系统自动生成"
                            />
                        </el-form-item>

                        <el-form-item label="案件类型" prop="caseType">
                            <el-select
                                v-model="queryParams.caseType"
                                class="w-[200px]"
                                clearable
                                disabled
                            >
                                <el-option label="专利" value="专利" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="客户名称" prop="clientName">
                            <el-select
                                class="w-[200px]"
                                v-model="queryParams.clientName"
                                filterable
                                @change="handleClientName"
                            >
                                <el-option
                                    v-for="item in optionNames"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="提案名称" prop="proposalName">
                            <el-input class="w-[200px]" v-model="queryParams.proposalName" />
                        </el-form-item>

                        <el-form-item label="业务人员" prop="businessPersonnel">
                            <el-select
                                v-model="queryParams.businessPersonnel"
                                class="w-[200px]"
                                clearable
                            >
                                <el-option label="流程01" value="1" />
                                <el-option label="流程02" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="业务助理" prop="businessAssistant">
                            <el-select
                                v-model="queryParams.businessAssistant"
                                class="w-[200px]"
                                clearable
                            >
                                <el-option label="代理01" value="1" />
                                <el-option label="代理02" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="内部安源人" prop="internalSecurityPeople">
                            <el-input
                                class="w-[200px]"
                                v-model="queryParams.internalSecurityPeople"
                            />
                        </el-form-item>

                        <el-form-item label="第二案源人" prop="secondCaseSource">
                            <el-input class="w-[200px]" v-model="queryParams.secondCaseSource" />
                        </el-form-item>
                        <el-form-item label="外部案源人" prop="externalCaseSource">
                            <el-input class="w-[200px]" v-model="queryParams.externalCaseSource" />
                        </el-form-item>

                        <el-form-item label="检索人" prop="searchman">
                            <el-input class="w-[200px]" v-model="queryParams.searchman" />
                        </el-form-item>
                        <el-form-item label="检索时间" prop="searchTime">
                            <el-date-picker
                                style="width: 200px"
                                v-model="queryParams.searchTime"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                                placeholder="请选择检索时间"
                            />
                        </el-form-item>

                        <el-form-item label="有无技术交底书" prop="isTechnicalDisclosure">
                            <el-radio-group v-model="radio2" class="ml-4">
                                <el-radio label="1" size="large">有</el-radio>
                                <el-radio label="2" size="large">无</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item
                            style="margin-left: 80px"
                            label="是否为线上下单"
                            prop="isBopis"
                        >
                            <el-radio-group v-model="radio1" class="ml-4">
                                <el-radio label="1" size="large">是</el-radio>
                                <el-radio label="2" size="large">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <div>
                            <div style="display: flex; border: 1px solid #f2f2f2">
                                <div class="namebox">
                                    <span style="color: #ff0000">*</span>
                                    <span style="white-space: nowrap">客户联系人</span>
                                </div>
                                <div style="padding: 10px; width: 86%">
                                    <span style="padding: 10px">选择联系人</span>
                                    <el-button
                                        v-perms="['linkman:add']"
                                        size="small"
                                        type="primary"
                                        @click="linkmanAdd()"
                                    >
                                        <template #icon>
                                            <icon name="el-icon-Plus" />
                                        </template>
                                        新增联系人
                                    </el-button>
                                    <div style="padding: 0px 10px">
                                        <el-checkbox-group
                                            v-model="queryParams.customerContactid"
                                            @change="changeLinkman"
                                        >
                                            <el-checkbox
                                                v-for="item in linkmanData"
                                                :label="item.id"
                                                :key="item.id"
                                                size="large"
                                                >{{ item.name }}</el-checkbox
                                            >
                                        </el-checkbox-group>
                                    </div>
                                    <el-table
                                        class="mt-4"
                                        size="large"
                                        :data="likemanTableData"
                                        stripe
                                    >
                                        <el-table-column label="名称" prop="name" min-width="140" />
                                        <el-table-column
                                            label="联系人类别"
                                            prop="type"
                                            min-width="150"
                                        />
                                        <el-table-column
                                            label="座机"
                                            prop="number"
                                            min-width="140"
                                        />
                                        <el-table-column
                                            label="电话"
                                            prop="phone"
                                            min-width="140"
                                        />
                                        <el-table-column
                                            label="email"
                                            prop="email"
                                            min-width="140"
                                        />
                                        <el-table-column
                                            label="联系地址"
                                            prop="workAddress"
                                            min-width="140"
                                        />
                                        <el-table-column label="操作" width="120" fixed="right">
                                            <template v-slot="scope">
                                                <el-button
                                                    @click="
                                                        moveRow(
                                                            likemanTableData,
                                                            scope.row,
                                                            scope.$index,
                                                            'up'
                                                        )
                                                    "
                                                    size="mini"
                                                    type="text"
                                                    :icon="Top"
                                                    :disabled="scope.$index === 0"
                                                >
                                                </el-button>
                                                <el-button
                                                    @click="
                                                        moveRow(
                                                            likemanTableData,
                                                            scope.row,
                                                            scope.$index,
                                                            'down'
                                                        )
                                                    "
                                                    size="mini"
                                                    type="text"
                                                    :icon="Bottom"
                                                    :disabled="
                                                        scope.$index === likemanTableData.length - 1
                                                    "
                                                >
                                                </el-button>
                                                <el-button type="danger" link @click="handleAdd()">
                                                    <template #icon>
                                                        <el-icon>
                                                            <Close />
                                                        </el-icon>
                                                    </template>
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div style="display: flex; border: 1px solid #f2f2f2">
                                <div class="namebox">
                                    <span style="white-space: nowrap">申请人</span>
                                </div>
                                <div style="padding: 10px; width: 85%">
                                    <span style="padding: 10px">选择申请人</span>

                                    <el-button
                                        v-perms="['applicant:add']"
                                        size="small"
                                        type="primary"
                                        @click="applicantAdd()"
                                    >
                                        <template #icon>
                                            <icon name="el-icon-Plus" />
                                        </template>
                                        新增申请人
                                    </el-button>

                                    <div style="padding: 0px 10px">
                                        <el-checkbox-group
                                            v-model="queryParams.proposerid"
                                            @change="changeApplicant"
                                        >
                                            <el-checkbox
                                                v-for="item in applicantData"
                                                :label="item.id"
                                                :key="item.id"
                                                size="large"
                                                >{{ item.customerNameChinese }}</el-checkbox
                                            >
                                        </el-checkbox-group>
                                    </div>

                                    <el-table
                                        class="mt-4"
                                        size="large"
                                        :data="applicantTableData"
                                        stripe
                                    >
                                        <el-table-column
                                            label="案件类型"
                                            prop="caseType"
                                            min-width="100"
                                        />
                                        <el-table-column
                                            label="申请人(中文)"
                                            prop="customerNameChinese"
                                            min-width="120"
                                        />
                                        <el-table-column
                                            label="申请人(英文)"
                                            prop="customerNameEnglish"
                                            min-width="120"
                                        />
                                        <el-table-column
                                            label="申请人编号"
                                            prop="applicantId"
                                            min-width="120"
                                        />
                                        <el-table-column
                                            label="所属地区"
                                            prop="nation"
                                            min-width="100"
                                        />
                                        <el-table-column
                                            label="申请人地址"
                                            prop="streetChinese"
                                            min-width="120"
                                        />

                                        <el-table-column
                                            label="申请人地址(英文)"
                                            prop="streetEnglish"
                                            min-width="160"
                                        />
                                        <el-table-column
                                            label="证件号"
                                            prop="idNumber"
                                            min-width="100"
                                        />
                                        <el-table-column
                                            label="创建日期"
                                            prop="creationDate"
                                            min-width="120"
                                        />
                                        <el-table-column
                                            label="创建人"
                                            prop="creator"
                                            min-width="100"
                                        />
                                        <el-table-column
                                            label="费减备案"
                                            prop="feeReductionFiling"
                                            min-width="100"
                                        />
                                        <el-table-column
                                            label="总委托书编号"
                                            prop="id"
                                            min-width="140"
                                        />
                                        <el-table-column
                                            label="邮编"
                                            prop="cepctPostcode"
                                            min-width="100"
                                        />

                                        <el-table-column label="操作" width="120" fixed="right">
                                            <template v-slot="scope">
                                                <el-button
                                                    @click="
                                                        moveRow(
                                                            applicantTableData,
                                                            scope.row,
                                                            scope.$index,
                                                            'up'
                                                        )
                                                    "
                                                    size="mini"
                                                    type="text"
                                                    :icon="Top"
                                                    :disabled="scope.$index === 0"
                                                >
                                                </el-button>
                                                <el-button
                                                    @click="
                                                        moveRow(
                                                            applicantTableData,
                                                            scope.row,
                                                            scope.$index,
                                                            'down'
                                                        )
                                                    "
                                                    size="mini"
                                                    type="text"
                                                    :icon="Bottom"
                                                    :disabled="
                                                        scope.$index ===
                                                        applicantTableData.length - 1
                                                    "
                                                >
                                                </el-button>
                                                <el-button type="danger" link @click="handleAdd()">
                                                    <template #icon>
                                                        <el-icon>
                                                            <Close />
                                                        </el-icon>
                                                    </template>
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div style="display: flex; border: 1px solid #f2f2f2">
                                <div class="namebox">
                                    <span style="white-space: nowrap">发明人信息</span>
                                </div>
                                <div style="padding: 10px; width: 85%">
                                    <span style="padding: 10px">选择发明人</span>
                                    <el-button
                                        v-perms="['inventor:add']"
                                        size="small"
                                        type="primary"
                                        @click="inventorAdd()"
                                    >
                                        <template #icon>
                                            <icon name="el-icon-Plus" />
                                        </template>
                                        添加发明人
                                    </el-button>
                                    <div style="padding: 0px 10px">
                                        <el-checkbox-group
                                            v-model="queryParams.inventorInformationid"
                                            @change="changeInventor"
                                        >
                                            <el-checkbox
                                                v-for="item in inventorData"
                                                :label="item.id"
                                                size="large"
                                                >{{ item.chineseName }}</el-checkbox
                                            >
                                        </el-checkbox-group>
                                    </div>
                                    <el-table
                                        class="mt-4"
                                        size="large"
                                        :data="inventorTableData"
                                        stripe
                                    >
                                        <el-table-column type="selection" width="55" />
                                        <el-table-column label="ID" prop="id" min-width="50" />
                                        <el-table-column label="操作" width="120" fixed="right">
                                            <template v-slot="scope">
                                                <el-button
                                                    @click="
                                                        moveRow(
                                                            applicantTableData,
                                                            scope.row,
                                                            scope.$index,
                                                            'up'
                                                        )
                                                    "
                                                    size="mini"
                                                    type="text"
                                                    :icon="Top"
                                                    :disabled="scope.$index === 0"
                                                >
                                                </el-button>
                                                <el-button
                                                    @click="
                                                        moveRow(
                                                            applicantTableData,
                                                            scope.row,
                                                            scope.$index,
                                                            'down'
                                                        )
                                                    "
                                                    size="mini"
                                                    type="text"
                                                    :icon="Bottom"
                                                    :disabled="
                                                        scope.$index ===
                                                        applicantTableData.length - 1
                                                    "
                                                >
                                                </el-button>
                                                <el-button type="danger" link @click="handleAdd()">
                                                    <template #icon>
                                                        <el-icon>
                                                            <Close />
                                                        </el-icon>
                                                    </template>
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div style="display: flex; border: 1px solid #f2f2f2">
                                <div class="namebox">
                                    <span style="white-space: nowrap">发明人信息</span>
                                </div>
                                <div style="padding: 10px; width: 85%">
                                    <span style="padding: 10px">选择发明人</span>
                                    <el-button
                                        v-perms="['inventor:add']"
                                        size="small"
                                        type="primary"
                                        @click="inventorAdd()"
                                    >
                                        <template #icon>
                                            <icon name="el-icon-Plus" />
                                        </template>
                                        添加发明人
                                    </el-button>
                                    <div style="padding: 0px 10px">
                                        <el-checkbox-group
                                            v-model="queryParams.inventorInformationid"
                                            @change="changeInventor"
                                        >
                                            <el-checkbox
                                                v-for="item in inventorData"
                                                :label="item.id"
                                                size="large"
                                                >{{ item.chineseName }}</el-checkbox
                                            >
                                        </el-checkbox-group>
                                    </div>
                                    <el-table
                                        class="mt-4"
                                        size="large"
                                        :data="inventorTableData"
                                        stripe
                                    >
                                        <el-table-column type="selection" width="55" />
                                        <el-table-column label="ID" prop="id" min-width="50" />

                                        <el-table-column
                                            label="客户名称"
                                            prop="customerName"
                                            min-width="110"
                                        >
                                            <template #default="{ row }">
                                                <span
                                                    @click="handleEditcopy(row)"
                                                    style="color: #409eff"
                                                >
                                                    {{ row.customerName }}</span
                                                >
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="姓名"
                                            prop="chineseName"
                                            min-width="110"
                                        />
                                        <el-table-column
                                            label="英文名"
                                            prop="englishName"
                                            min-width="100"
                                        />
                                        <el-table-column
                                            label="国别(地区)"
                                            prop="nation"
                                            min-width="110"
                                        />
                                        <el-table-column
                                            label="地址(英文)"
                                            prop="nation"
                                            min-width="110"
                                        />
                                        <el-table-column
                                            label="身份证号"
                                            prop="idNumber"
                                            min-width="110"
                                        />
                                        <el-table-column
                                            label="工号"
                                            prop="idNumber"
                                            min-width="110"
                                        />
                                        <el-table-column
                                            label="联系电话"
                                            prop="phone"
                                            min-width="110"
                                        />
                                        <el-table-column
                                            label="邮件"
                                            prop="email"
                                            min-width="110"
                                        />
                                        <el-table-column
                                            label="创建时间"
                                            prop="createTime"
                                            min-width="100"
                                        />
                                        <el-table-column
                                            label="创建人员"
                                            prop="creator"
                                            min-width="100"
                                        />
                                        <el-table-column label="操作" width="120" fixed="right">
                                            <template v-slot="scope">
                                                <el-button
                                                    @click="
                                                        moveRow(
                                                            inventorTableData,
                                                            scope.row,
                                                            scope.$index,
                                                            'up'
                                                        )
                                                    "
                                                    size="mini"
                                                    type="text"
                                                    :icon="Top"
                                                    :disabled="scope.$index === 0"
                                                >
                                                </el-button>
                                                <el-button
                                                    @click="
                                                        moveRow(
                                                            inventorTableData,
                                                            scope.row,
                                                            scope.$index,
                                                            'down'
                                                        )
                                                    "
                                                    size="mini"
                                                    type="text"
                                                    :icon="Bottom"
                                                    :disabled="
                                                        scope.$index ===
                                                        inventorTableData.length - 1
                                                    "
                                                >
                                                </el-button>
                                                <el-button type="danger" link @click="handleAdd()">
                                                    <template #icon>
                                                        <el-icon>
                                                            <Close />
                                                        </el-icon>
                                                    </template>
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                    </el-form>
                </el-collapse-item>
                <el-collapse-item title="开卷信息" name="2">
                    <uncoil-data />
                </el-collapse-item>
                <el-collapse-item title="附件信息" name="3">
                    <annex-data />
                </el-collapse-item>
            </el-collapse>
        </el-card>
        <linkmanEditPopup
            v-if="linkmanshowEdit"
            ref="linkmaneditRef"
            @success="getLists"
            @close="linkmanshowEdit = false"
        />
        <applicantEditPopup
            v-if="applicantshowEdit"
            ref="applicanteditRef"
            @success="getLists"
            @close="applicantshowEdit = false"
        />
        <inventorEditPopup
            v-if="inventorshowEdit"
            ref="inventoreditRef"
            @success="getLists"
            @close="inventorshowEdit = false"
        />
        <submitEditPopup
            v-if="submitshowEdit"
            ref="submiteditRef"
            @success="getLists"
            @close="submitshowEdit = false"
        />

        <footer-btns>
            <div style="padding: 20px">
                <el-button type="primary">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    保存
                </el-button>
                <el-button @click="submitAdd()">提交</el-button>
            </div>
        </footer-btns>
    </div>
</template>

<script lang="ts" setup name="copyright">
import { copyrightDelete, copyrightLists } from '@/api/copyright'
import { customerNameFoAll } from '@/api/customer/customerColList'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import baseVue from './component/baseVue.vue'
import applicatVue from './component/applicatVue.vue'
import inventorVue from './component/inventorVue.vue'
import uncoilData from './uncoilData.vue'
import annexData from './clientFile/annexData.vue'
import cache from '@/utils/cache'
import { CUSTOMER_ID } from '@/enums/cacheEnums'
import { linkmanAlls } from '@/api/linkman'
import { filter } from 'lodash-es'
import { applicantAll } from '@/api/applicant'
import { inventorAll } from '@/api/inventor'
import { Top, Close, Bottom } from '@element-plus/icons-vue'
import linkmanEditPopup from '@/views/client/clientData/component/linkman/edit.vue'
import applicantEditPopup from '@/views/client/clientData/component/applicantList/edit.vue'
import inventorEditPopup from '@/views/client/clientData/component/inventorList/edit.vue'
import submitEditPopup from '../edit.vue'

const activeNames = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
// import EditPopup from './edit.vue'
// const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// const showEdit = ref(false)
const queryParams = reactive({
    id: '',
    proposition: '',
    proposalName: '',
    clientName: '',
    reputationGrade: '',
    businessPersonnel: '',
    businessAssistant: '',
    internalSecurityPeople: '',
    caseType: '专利',
    searchman: '',
    searchTimeStart: '',
    searchTimeEnd: '',
    externalCaseSource: '',
    secondCaseSource: '',
    caseTypeid: '',
    businessPersonnelid: '',
    customerContactid: [],
    proposerid: [],
    inventorInformationid: [],
    isTechnicalDisclosure: '',
    isBopis: '',
    userId: '',
    userName: '',
    searchTime: ''
})
const linkmanshowEdit = ref(false)
const linkmaneditRef = shallowRef<InstanceType<typeof linkmanEditPopup>>()

const applicantshowEdit = ref(false)
const applicanteditRef = shallowRef<InstanceType<typeof applicantEditPopup>>()

const inventorshowEdit = ref(false)
const inventoreditRef = shallowRef<InstanceType<typeof inventorEditPopup>>()

const submitshowEdit = ref(false)
const submiteditRef = shallowRef<InstanceType<typeof submitEditPopup>>()

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: copyrightLists,
    params: queryParams
})

const radio1 = ref('1')
const radio2 = ref('1')

const linkmanData = ref([])
const applicantData = ref([])
const inventorData = ref([])

const queryParamsApplicant = reactive({
    caseType: '专利',
    customerId: 0
})
const queryParamsLinkman = reactive({
    caseType: '专利',
    customerMianId: 0
})
const queryParamsInventor = reactive({
    customerId: 0
})
const handleClientName = (val: number) => {
    queryParamsLinkman.customerMianId = val
    queryParamsApplicant.customerId = val
    queryParamsInventor.customerId = val
    if (val) {
        getLinkmanList()
        getApplicantList()
        getInventorList()
    }
}

const likemanTableData = ref([])
const applicantTableData = ref([])
const inventorTableData = ref([])

const linkmanAdd = async () => {
    linkmanshowEdit.value = true
    await nextTick()
    linkmaneditRef.value?.open('add')
}

const applicantAdd = async () => {
    applicantshowEdit.value = true
    await nextTick()
    applicanteditRef.value?.open('add')
}
const inventorAdd = async () => {
    inventorshowEdit.value = true
    await nextTick()
    inventoreditRef.value?.open('add')
}
const submitAdd = async () => {
    submitshowEdit.value = true
    await nextTick()
    submiteditRef.value?.open('add')
}

// const handleEdit = async (data: any) => {
//     showEdit.value = true
//     await nextTick()
//     editRef.value?.open('edit')
//     editRef.value?.getDetail(data)
// }
const formRules = {
    proposalName: [
        {
            required: true,
            message: '请输入提案名称',
            trigger: ['blur']
        }
    ],
    clientName: [
        {
            required: true,
            message: '请输入客户名称',
            trigger: ['blur']
        }
    ],
    businessPersonnel: [
        {
            required: true,
            message: '请输入业务人员',
            trigger: ['blur']
        }
    ],
    customerContactid: [
        {
            required: true,
            message: '请选择客户联系人',
            trigger: ['blur']
        }
    ]
}

const optionNames = ref([])
//获取所有客户名称
const getCustomerName = async () => {
    const data = await customerNameFoAll()
    optionNames.value = data
}
const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await copyrightDelete({ id })
    feedback.msgSuccess('删除成功')
    getLists()
}

const getLinkmanList = async () => {
    const data = await linkmanAlls(queryParamsLinkman)
    linkmanData.value = data
}

const changeLinkman = async () => {
    likemanTableData.value = linkmanData.value.filter((item) =>
        queryParams.customerContactid.includes(item.id)
    )
}

const getApplicantList = async () => {
    const data = await applicantAll(queryParamsApplicant)
    applicantData.value = data
}

const changeApplicant = async () => {
    applicantTableData.value = applicantData.value.filter((item) =>
        queryParams.proposerid.includes(item.id)
    )
}

const getInventorList = async () => {
    const data = await inventorAll(queryParamsInventor)
    inventorData.value = data
}

const changeInventor = async () => {
    inventorTableData.value = inventorData.value.filter((item) =>
        queryParams.inventorInformationid.includes(item.id)
    )
}

const moveRow = (tabeldate: any, row: any, index: any, direction: string) => {
    // 计算目标索引
    const targetIndex = direction === 'up' ? index - 1 : index + 1

    // 边界判断
    if (targetIndex < 0 || targetIndex >= tabeldate.length) return

    // 移动数据
    const temp = tabeldate[index]
    tabeldate[index] = tabeldate[targetIndex]
    tabeldate[targetIndex] = temp
}
getCustomerName()
getLists()
</script>
<style scoped>
.formEdit .el-form-item {
    width: 590px;
}

.namebox {
    /* padding: 0px 50px; */
    min-width: 175px;
    background-color: var(--el-bg-color-collapse);
    display: flex;
    justify-content: center;
    align-items: center;
}

::v-deep .el-collapse-item__header {
    padding-left: 54px;
    background-color: var(--el-bg-color-collapse);
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-collapse);
}

::v-deep .el-collapse-item__wrap {
    padding-top: 40px;
}
</style>
